<template>  
    <div class="cart-container">  
      <h2>购物车</h2>  
      <div class="cart-items" v-if="cartItems.length > 0">  
        <div class="cart-item" v-for="(item, index) in cartItems" :key="item.id">  
          <h3>{{ item.name }}</h3>  
          <img :src="cartItems.image" alt="商品图片">
          <p>价格: ¥{{ item.price }}</p>  
          <div class="quantity-control">  
            <button @click="decreaseQuantity(index)" :disabled="item.quantity <= 1">-</button>  
            <span>{{ item.quantity }}</span>  
            <button @click="increaseQuantity(index)">+</button>  
          </div>  
          <p>小计: ¥{{ item.price * item.quantity }}</p>  
          <button @click="removeItem(index)">移除</button>  
        </div>  
      </div>  
      <div v-else>  
        <p>购物车为空</p>  
      </div>  
      <div class="total-price">  
        <h3>总价: ¥{{ totalPrice }}</h3>  
      </div>  
    </div>  
  </template>  
    
  <script>  
  export default {  
    data() {  
      return {  
        cartItems: [  
          { id: 1, name: '商品1', price: 4500, quantity: 2 ,image:'https://www.helloimg.com/i/2024/11/05/6729c28869108.jpg'},  
          { id: 2, name: '商品2', price: 8000, quantity: 1,image: 'https://www.helloimg.com/i/2024/10/24/671a3e57f080e.jpg' },  
          // 你可以在这里添加更多初始商品  
        ],  
      };  
    },  
    computed: {  
      totalPrice() {  
        return this.cartItems.reduce((total, item) => total + item.price * item.quantity, 0);  
      },  
    },  
    methods: {  
      increaseQuantity(index) {  
        this.cartItems[index].quantity++;  
      },  
      decreaseQuantity(index) {  
        if (this.cartItems[index].quantity > 1) {  
          this.cartItems[index].quantity--;  
        }  
      },  
      removeItem(index) {  
        this.cartItems.splice(index, 1);  
      },  
    },  
  };  
  </script>  
    
  <style scoped>  
  .cart-container {  
    width: 80%;  
    margin: 0 auto;  
    padding: 20px;  
    border: 1px solid #ddd;  
    border-radius: 5px;  
  }  
    
  .cart-items {  
    margin-bottom: 20px;  
  }  
    
  .cart-item {  
    border-bottom: 1px solid #eee;  
    padding: 10px 0;  
  }  
    
  .quantity-control {  
    display: flex;  
    align-items: center;  
  }  
    
  .quantity-control button {  
    width: 30px;  
    height: 30px;  
    font-size: 16px;  
    margin: 0 5px;  
  }  
    
  .total-price {  
    text-align: right;  
    font-size: 20px;  
    font-weight: bold;  
  }  
  </style>